<template>
  <el-affix :offset="0">
    <div style="background: rgb(84, 92, 100);height: 60px;">


      <el-row>

        <el-col :span="18" style="padding-top: 20px;">
          <div style="float: left;padding-left:400px; color: white;font-size: 18px;font-weight: bolder;">
            <el-space>
              <span>{{ nowDate }}</span>
              <el-divider direction="vertical"></el-divider>
              <span>{{ nowTime }}</span>
              <el-divider direction="vertical"></el-divider>
              <span>{{ nowWeek }}</span>
            </el-space>
          </div>
        </el-col>

        <el-col :span="2">
          <div style="width:200px;color: white;padding-left: 90%;">
            <el-image style="width: 35px; height: 35px;border-radius: 50%;position: relative;top: 10px;"
                      :src="head_imag"></el-image>
            <el-dropdown style="padding-top: 20px;">
              <span class="el-dropdown-link">
            <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item style="font-family: 'Roboto',sans-serif;">
                    <p style="padding: 0;margin: 0;" @click="goto_show">查看门户</p></el-dropdown-item>
                </el-dropdown-menu>
                <el-dropdown-menu>
                  <el-dropdown-item style="font-family: 'Roboto',sans-serif;">
                    <p style="padding: 0;margin: 0;" @click="outof_login">退出登录</p></el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-affix>

</template>

<script>
import axios from 'axios'

export default {
  name: 'NavBar',
  data () {
    return {
      timer: null,
      nowWeek: '',
      nowDate: '',
      nowTime: '',
      head_imag: ''
    }
  },
  mounted () {

    let _this = this
    this.timer = setInterval(() => {
      this.setNowTimes()
    }, 1000)
  },
  methods: {
    goto_show () {
      this.$router.push('/')
    },
    outof_login () {
      this.$confirm('此操作将退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.Loginkey = false
        localStorage.removeItem('Token')
        this.$router.push('/Weblogin')
        this.$message({
          type: 'success',
          message: '成功退出登录!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出登录'
        })
      })
    },
    setNowTimes () {
      let myDate = new Date()
      // console.log(myDate)
      let wk = myDate.getDay()
      let yy = String(myDate.getFullYear())
      let mm = myDate.getMonth() + 1
      let dd = String(
        myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate()
      )
      let hou = String(
        myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours()
      )
      let min = String(
        myDate.getMinutes() < 10
          ? '0' + myDate.getMinutes()
          : myDate.getMinutes()
      )
      let sec = String(
        myDate.getSeconds() < 10
          ? '0' + myDate.getSeconds()
          : myDate.getSeconds()
      )
      let weeks = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六',
      ]
      let week = weeks[wk]
      this.nowDate = yy + '年' + mm + '月' + dd + '日'
      this.nowTime = hou + ':' + min + ':' + sec
      this.nowWeek = week
    },
  },
  created () {
    let _this = this
    axios.post('http://localhost:8080//FindUserImage?UserID=' + eval(localStorage.getItem('username')))
      .then(function (response) {
        console.log(response.data)
        const temp = response.data.student_imagepath.substr(17)
        _this.head_imag = require('E:/job/UserImage/' + temp)
      })
      .catch(function (error) {
        console.log(error)
      })

  }

}
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: whitesmoke;
}

.el-icon-arrow-down {
  font-size: 12px;
}

</style>
